<template>
  <div id="app">
    <div style="width: 100%;height: 600px;display: flex">
      <Map id="map" class="map"/>
      <List id="list" class="list"/>
      <SunriseChart id="sunriseChart" class="sunriseChart"/>
    </div>
    <div style="width: 100%;height:600px;display: flex">
      <RoseChart id="RoseChart" class="RoseChart"/>
      <RadarChart id="RadarChart" class="RadarChart"/>
      <AnscombQuartet id="AnscombQuartet" class="AnscombQuartet"/>
    </div>
    <div style="width: 100%;height:600px;display: flex">
      <MaximumTemperatureInstrumentPanel id="maximumTemperatureInstrumentPanel" class="maximumTemperatureInstrumentPanel"/>
      <AirQualityScoreDashboard id="AirQualityScoreDashboard" class="AirQualityScoreDashboard"/>
      <AirHumidityInstrumentPanel id="AirHumidityInstrumentPanel" class="AirHumidityInstrumentPanel"/>
    </div>
  </div>
</template>

<script>
import Map from './components/map.vue'
import List from './components/list.vue'
import SunriseChart from "@/components/sunriseChart";
import MaximumTemperatureInstrumentPanel from "@/components/MaximumTemperatureInstrumentPanel";
import AirQualityScoreDashboard from "@/components/AirQualityScoreDashboard";
import AirHumidityInstrumentPanel from "@/components/AirHumidityInstrumentPanel";
import RadarChart from "@/components/radarChart";
import RoseChart from "@/components/RoseChart";
import AnscombQuartet from "@/components/AnscombQuartet";

export default {
  name: 'App',
  components: {
    Map,
    List,
    SunriseChart,
    MaximumTemperatureInstrumentPanel,
    AirQualityScoreDashboard,
    AirHumidityInstrumentPanel,
    RadarChart,
    RoseChart,
    AnscombQuartet
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  border: none;
}
::-webkit-scrollbar {
  width: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;

  width: 100%;
}
.map{
  width: 50%;
  height: 600px;
}
.list{
  width: 20%;
}
.sunriseChart{
  width: 30%
}
.maximumTemperatureInstrumentPanel{
  width: 33%;
}
.AirQualityScoreDashboard{
  width: 33%;
}
.AirHumidityInstrumentPanel{
  width: 33%;
}
.RadarChart{
  width: 30%;
}
.RoseChart{
  width: 30%;
}
.AnscombQuartet{
  width: 40%;
}
</style>
